<template>
  <li
    :class="classes"
    @click="expandChild(true)"
    @mouseleave="mouseleavePanel"
    @mouseenter="enterChild" >
    <span class="inner">{{item.label}}</span>
    <Icon v-if="hasChild" type="icon-right" style="float: right" />
  </li>
</template>

<script>
import Icon from '../../icon'
export default {
  name: 'Casitem',
  components: {
    Icon
  },
  props: {
    item: Object,
    index: Number,
    active: Boolean,
    trigger: String
  },
  data () {
    return {
      expand: this.active
    }
  },
  computed: {
    hasChild () {
      return this.item.children && this.item.children.length > 0
    },
    classes () {
      return [
        'sh-casitem',
        'sh-option',
        {
          'sh-option-active': this.expand && !this.item.disabled,
          'sh-option-disabled': this.item.disabled
        }
      ]
    }
  },
  watch: {
    active (val) {
      this.expand = val
    }
  },
  methods: {
    expandChild (isclick = false) {
      const condition = !this.hasChild && !this.item.disabled && isclick
      this.$emit('on-expand', {
        index: this.index,
        expand: !!this.hasChild,
        value: condition ? this.item : false
      })
    },
    enterChild () {
      if (this.trigger === 'hover' && !this.item.disabled) {
        this.expandChild()
        this.expand = true
      }
    },
    mouseleavePanel () {
      if (!this.hasChild) {
        this.expand = false
      }
    }
  }
}
</script>
